<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.company.ems.model.User" %>
<%@ page import="java.util.List" %>
<%
    User loginUser = (User) session.getAttribute("loginUser");
    if (loginUser == null) {
        response.sendRedirect(request.getContextPath() + "/login.jsp");
        return;
    }
    List<String> departments = (List<String>) request.getAttribute("departments");
%>
<html>
<head>
    <title>新增员工 - 员工信息管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        /* 表单页专属样式 */
        .form-container {
            max-width: 800px;
            margin: 30px auto;
            padding: 0 20px;
        }

        .form-card {
            background-color: #fff;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 30px;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 24px;
        }

        .form-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        .required-mark {
            color: var(--danger);
            margin-left: 4px;
        }
    </style>
    <script>
        // 加载职位
        function loadPositions() {
            const dept = document.getElementById("department").value;
            const posSelect = document.getElementById("position");
            posSelect.innerHTML = "<option value=''>请选择职位</option>";
            if (!dept) return;

            const posMap = {
                "技术部": ["软件工程师", "测试工程师", "运维工程师"],
                "市场部": ["市场专员", "营销经理", "新媒体运营"],
                "人事部": ["HR经理", "招聘专员", "行政专员"]
            };
            (posMap[dept] || []).forEach(pos => {
                const opt = document.createElement("option");
                opt.value = pos;
                opt.text = pos;
                posSelect.appendChild(opt);
            });
        }

        // 表单验证
        function validate() {
            const name = document.getElementById("name").value.trim();
            const dept = document.getElementById("department").value;
            const pos = document.getElementById("position").value;
            const salary = document.getElementById("salary").value.trim();
            const hireDate = document.getElementById("hireDate").value;

            if (!name) {
                alert("姓名不能为空！");
                return false;
            }
            if (!dept) {
                alert("请选择部门！");
                return false;
            }
            if (!pos) {
                alert("请选择职位！");
                return false;
            }
            if (!salary || isNaN(Number(salary)) || Number(salary) <= 0) {
                alert("薪资必须为正数！");
                return false;
            }
            if (!hireDate) {
                alert("请选择入职日期！");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
<!-- 顶部导航 -->
<nav class="top-nav">
    <div class="nav-brand">
        <i class="fa fa-dashboard"></i>
        <span>员工信息管理系统</span>
    </div>
    <div class="nav-user">
        <span>欢迎您，<%= loginUser.getUsername() %>！</span>
        <a href="${pageContext.request.contextPath}/LogoutServlet" class="logout-btn">
            <i class="fa fa-sign-out"></i> 退出登录
        </a>
    </div>
</nav>

<!-- 主体内容 -->
<div class="form-container">
    <div class="form-card">
        <h1 class="page-title">
            <i class="fa fa-plus"></i> 新增员工信息
        </h1>

        <%-- 错误信息 --%>
        <% if (request.getAttribute("errorMsg") != null) { %>
        <div class="alert alert-danger">
            <i class="fa fa-exclamation-circle"></i> <%= request.getAttribute("errorMsg") %>
        </div>
        <% } %>

        <%-- 新增表单 --%>
        <form action="${pageContext.request.contextPath}/EmployeeServlet?action=add" method="post" onsubmit="return validate()">
            <div class="form-grid">
                <div class="form-group">
                    <label class="form-label" for="name">姓名 <span class="required-mark">*</span></label>
                    <input type="text" id="name" name="name" class="form-control" placeholder="请输入真实姓名" maxlength="100">
                </div>
                <div class="form-group">
                    <label class="form-label" for="department">部门 <span class="required-mark">*</span></label>
                    <select id="department" name="department" class="form-control" onchange="loadPositions()">
                        <option value="">请选择部门</option>
                        <% if (departments != null && !departments.isEmpty()) { %>
                        <% for (String dept : departments) { %>
                        <option value="<%= dept %>"><%= dept %></option>
                        <% } %>
                        <% } %>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label" for="position">职位 <span class="required-mark">*</span></label>
                    <select id="position" name="position" class="form-control">
                        <option value="">请选择职位</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label" for="salary">薪资（元） <span class="required-mark">*</span></label>
                    <input type="text" id="salary" name="salary" class="form-control" placeholder="例如：15000.00">
                </div>
                <div class="form-group">
                    <label class="form-label" for="email">电子邮箱</label>
                    <input type="email" id="email" name="email" class="form-control" placeholder="请输入工作邮箱" maxlength="100">
                </div>
                <div class="form-group">
                    <label class="form-label" for="phone">联系电话</label>
                    <input type="text" id="phone" name="phone" class="form-control" placeholder="请输入手机号" maxlength="20">
                </div>
                <div class="form-group">
                    <label class="form-label" for="hireDate">入职日期 <span class="required-mark">*</span></label>
                    <input type="date" id="hireDate" name="hireDate" class="form-control">
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">
                    <i class="fa fa-save"></i> 提交
                </button>
                <a href="${pageContext.request.contextPath}/EmployeeServlet?action=list" class="btn btn-outline">
                    <i class="fa fa-arrow-left"></i> 返回列表
                </a>
            </div>
        </form>
    </div>
</div>

<!-- 页脚 -->
<footer class="app-footer">
    <p>© 2025 员工信息管理系统 | 技术栈：Servlet + JSP + MyBatis</p>
</footer>
</body>
</html>